<template>
    <div :class="componentStyle" :dusk="'detail-'+attribute+'-'+index">
        <div :class="titleStyle" v-if="group.title">
            <span class="block float-left border-r border-gray-100 dark:border-gray-700  pr-4 mr-4"><!--
             --><span class="text-60 text-xs">#</span><!--
             --><span class="text-80">{{index+1}}</span>
            </span>
            <span class="font-bold">{{group.title}}</span>
        </div>
        <component
            v-for="(item, index) in group.fields"
            :key="index"
            :is="'detail-' + item.component"
            :resource-name="resourceName"
            :resource-id="resourceId"
            :field="item"
            :validation-errors="null"
            :class="{ 'remove-bottom-border': index == group.fields.length - 1 }"
        />
    </div>
</template>

<script>
export default {
    props: ['attribute', 'group', 'index', 'last', 'resource', 'resourceName', 'resourceId'],

    computed: {
        componentStyle() {
            return this.last ? [] : ['border-b border-50 pb-4 mb-4'];
        },
        titleStyle() {
            return ['pb-4', 'border-b', 'border-gray-100', 'dark:border-gray-700'];
        }
    }
}
</script>
